<template>
    <div id="leave">
        <!-- 文章列表操作 -->
        <div class="article-tool">
            <ul class="fl">
                <li >
                    <el-button size="small" icon="el-icon-refresh">刷新</el-button>
                </li>
            </ul>
            <div class="fr">
                <el-form :inline="true">
                    <el-form-item >
                        <el-input placeholder="请输入内容" size="small" v-model="articleKey"></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-button size="small" icon="el-icon-search" id="articleSearch">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="cb"></div>
        </div>
        <div class="article-body">
          <el-table
          :data="articleData.slice((articleCurrentPage-1)*articlePagesize,articleCurrentPage*articlePagesize)"
          @row-click="articleClick"
          v-loading="articleLoading"
          >
              <el-table-column
              prop="title"
              label="文章标题"
              width="500"
              >
              </el-table-column>

              <el-table-column label="留言数量">
                  <el-table-column
                  prop="auditnum"
                  label="待定"
                  width="120">
                  </el-table-column>
                  <el-table-column
                  prop="shownum"
                  label="显示"
                  width="120">
                  </el-table-column>
                  <el-table-column
                  prop="hidenum"
                  label="隐藏"
                  width="120">
                  </el-table-column>
                  <el-table-column
                  prop="totalnum"
                  label="总共"
                  width="120">
                  </el-table-column>
              </el-table-column>
              <el-table-column
              prop="comable"
              label="留言权限"
              width="150"
              :formatter="formatterInp"
              >
              </el-table-column>
              <el-table-column
              prop="addTime"
              label="创建时间"
              width="200"
              :formatter="formatterTime"
              >
              </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleArticleSizeChange"
            @current-change="handleArticleCurrentChange"
            :current-page="articleCurrentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="articlePagesize"
            layout="total, sizes, prev, pager, next"
            :total="articleData.length"
          >
          </el-pagination>
        </div>
        
        <!-- 留言管理 -->
        <div class="leave-tool">
            <ul class="fl">
                <li >
                    <el-button size="small" icon="el-icon-minus" >删除</el-button>
                    <el-button size="small" icon="el-icon-plus" id="showBtn">显示</el-button>
                    <el-button size="small" icon="el-icon-close" id="hideBtn">隐藏</el-button>
                    <el-button size="small" icon="el-icon-refresh">刷新</el-button>
                </li>
            </ul>
            <div class="fr">
                <el-form :inline="true">
                    <el-form-item >
                        <el-input placeholder="请输入内容" size="small" v-model="leaveKey"></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-button size="small" icon="el-icon-search" id="leaveSearch">查询</el-button>
                    </el-form-item>
                </el-form>           
            </div>
            <div class="cb"></div>
        </div>
        <div class="leave-body">
          <el-table
          ref="multipleTable"
          :data="leaveData.slice((leaveCurrentPage-1)*leavePagesize,leaveCurrentPage*leavePagesize)"
          v-loading="leaveLoading"
          @selection-change="leaveSelectionChange"
          border="true"
          >
              <el-table-column
              type="selection"
              width="55">
              </el-table-column>
              <el-table-column
                  prop="contents"
                  label="留言内容"
                  width="500"
              >
              </el-table-column>
              <el-table-column
                  prop="accountNickname"
                  label="账号昵称"

              >
              </el-table-column>
              <el-table-column
                  prop="status"
                  label="显示"

                  :formatter="formatterInp"
              >
              </el-table-column>
              <el-table-column
                  prop="createTime"
                  label="创建时间"

              >
              </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleLeaveSizeChange"
            @current-change="handleLeaveCurrentChange"
            :current-page="leaveCurrentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="leavePagesize"
            layout="total, sizes, prev, pager, next"
            :total="leaveData.length"
          >
          </el-pagination>
        </div>
        
    </div>
</template>

<script>
import axios from "axios";
import $ from "jquery";
export default {
  data: function() {
    return {
      articleData: [],
      articleLoading: true,
      articleKey: "",
      articleSelecteData: {},
      articleCurrentPage: 1,
      articlePagesize: 10,
      leaveData: [],
      leaveLoading: false,
      leaveKey: "",
      leaveSelecteData: [],
      leaveCurrentPage: 1,
      leavePagesize: 10
    };
  },
  methods: {
    //文章列表被点击
    articleClick(row, event, column) {
      this.getLeaveData(row.id);
      this.articleSelecteData = row;
    },
    // 文章分页
    handleArticleSizeChange: function(size) {
      this.articlePagesize = size;
    },
    handleArticleCurrentChange: function(currentPage) {
      this.articleCurrentPage = currentPage;
    },
    // 文章分页
    // 留言分页
    handleLeaveSizeChange: function(size) {
      this.leavePagesize = size;
    },
    handleLeaveCurrentChange: function(currentPage) {
      this.leaveCurrentPage = currentPage;
    },
    // 留言分页
    // 获取留言管理数据
    getLeaveData(id) {
      let _this = this;
      _this.leaveLoading = true;
      //收取留言管理数据
      $.ajax({
        method: "get",
        url: "/api/police/news/comment/list?respType=1",
        data: {
          searchAdv: JSON.stringify({ s_newsId: id })
        },
        success: function(data) {
          _this.leaveData = data.rows;
          _this.leaveLoading = false;
        }
      });
      //搜索留言
      $("#leaveSearch").click(function() {
        _this.leaveLoading = true;
        $.ajax({
          method: "get",
          url: "/api/police/news/comment/list?respType=1",
          data: {
            searchAdv: JSON.stringify({
              s_newsId: id,
              s_contents: _this.leaveKey,
              s_contents_op: "al"
            })
          },
          success: function(data) {
            _this.leaveData = data.rows;
            _this.leaveLoading = false;
          }
        });
      });
    },
    // 控制留言显示和隐藏
    leaveSelectionChange(val) {
      this.leaveSelecteData = val;
    },
    // 控制显示隐藏
    showAndHide(val) {
      let _this = this;
      let row = this.leaveSelecteData;
      let ids = "";
      for (let i = 0; i < row.length; i++) {
        ids += row[i].id + ",";
      }
      ids = ids.substring(0, ids.length - 1);
      if (row.length == 0) {
        this.$alert("请选中一行数据", "提示信息", {
          confirmButtonText: "确定"
        });
      } else {
        _this.leaveLoading = true;
        $.ajax({
          url: "/api/police/news/comment/changeStatus",
          dataType: "json",
          data: {
            ids: ids,
            val: val
          },
          type: "POST", //请求的方式
          success: function(data) {
            $.ajax({
              method: "get",
              url: "/api/police/news/comment/list?respType=1",
              data: {
                searchAdv: JSON.stringify({
                  s_newsId: _this.articleSelecteData.id
                })
              },
              async: false,
              success: function(data) {
                _this.leaveData = data.rows;
                if (val == 1) {
                  _this.$alert("显示成功", "提示信息", {
                    confirmButtonText: "确定"
                  });
                } else {
                  _this.$alert("隐藏成功", "提示信息", {
                    confirmButtonText: "确定"
                  });
                }
                _this.leaveLoading = false;
              }
            });
          }
        });
      }
    },
    //
    formatterInp(row, column, cellValue) {
      var inpt = "";
      if (cellValue == 1) {
        inpt = <input type="checkbox" checked="checked" />;
      } else {
        inpt = <input type="checkbox" />;
      }
      return inpt;
    },
    // 控制时间输出格式
    formatterTime(row, column, cellValue) {
      let date = new Date(cellValue); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() + " ";
      let h = date.getHours() + ":";
      let m = date.getMinutes() + ":";
      let s = date.getSeconds();
      return Y + M + D + h + m + s;
    }
  },
  mounted() {
    let _this = this;
    //设置文章数据
    axios({
      method: "get",
      url: "/api/police/news/comment/newsComCount?respType=1"
    })
      .then(function(response) {
        _this.articleData = response.data.rows;
        _this.articleLoading = false;
      })
      .catch(function(error) {
        console.log(error);
      });
    //搜索文章
    $("#articleSearch").click(function() {
      _this.articleLoading = true;
      $.ajax({
        method: "get",
        url: "/api/police/news/comment/newsComCount?respType=1",
        data: {
          searchStr: _this.articleKey
        },
        success: function(data) {
          _this.articleData = data.rows;
          _this.articleLoading = false;
        }
      });
    });
    //显示留言
    $("#showBtn").click(function() {
      _this.showAndHide(1);
    });
    // 隐藏留言
    $("#hideBtn").click(function() {
      _this.showAndHide(2);
    });
  }
};
</script>

<style scoped>
.article-tool {
  padding-left: 10px;
  padding-top: 20px;
  line-height: 40px;
  background: #fff;
}
.article-body {
  padding: 10px;
  background-color: #fff;
}
.leave-body {
  padding: 10px;
  background: #fff;
}

.leave-tool {
  padding-left: 10px;
  padding-top: 20px;
  line-height: 40px;
  background: #fff;
}
</style>
